<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
	</head>
	<body>
		<!--作用域插槽在作用域上绑定属性来将子组件的信息传给父组件使用
			作用域插槽也可以作为 子传父的方法  

			作用域插槽： 父组件替换插槽的标签，但是内容由子组件来提供

			主要是为了访问在子组件中的数据而提出的一种方案


			也可以理解为 
			为了从 子组件中拿出数据，但是样式由父组件自己提供  （插槽里面的属于默认值）

		-->

		<!--需求
			1、子组件中包括一组数据，比如 
			pLanguages:['JavaScript','Python','Swfit','Go','C++']

			2、需要在多个界面进行展示
					某些界面是以水平方向-展示的
					某些界面是以列表形式展示的，
					某些界面直接展示一个数组
			
			3、内容在子组件，希望父组件告诉我们如何让展示，怎么办呢？
					利用slot作用域插槽就可以了
		
		
		-->



		<div id="app">
			<cpn></cpn>
			<hr>
			<!-- 目的是获取子组件中的pLanguage属性
			2.5.x一下必须使用template -->
			
		<!--
			<cpn>
				<template slot-scope="slot">
					//因为绑定了 data这个属性
					<span v-for="item in slot.abc">-{{item}}</span>
				</template>
			</cpn>
-->	
			<cpn>
				<!--v-slot="slot"  这里的slot是用来在下面充当作用域的名字使用-->
				<template v-slot="slot">
					<!--使用join把数组转成字符串，并且多个元素之间可以用指定字符链接-->
					<span>{{slot.abc.join(" - ")}}</span>
				</template>
			</cpn>
		</div>



		<template id="cpn">
			<div>
				<!-- abc这个名字是随便起的
				主要是绑定子组件中的数据
				-->
			
					<!--绑定在 标签slot元素上的特性被称为插槽prop-->
					<slot :abc="pLanguage">
					<!--这个插槽默认显示下面的列表-->
					<ul>
						<li v-for="item in pLanguage">{{item}}</li>
					</ul>
				</slot>
		
			</div>
		</template>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			const app = new Vue({
				el: '#app',
				data: {
					message: 'hello'
				},
				components: {
					cpn: {
						template: "#cpn",
						data() {
							return {
								pLanguage: ['111', '222', '333', '444'],
								name: 'laravst'
							}
						}
					}
				}
			});
		</script>
	</body>
</html>
